<template>
	<view style="width: 100%;height: 100vh;color: white;" class="flex_column">
		<!-- 首页 -->
		<page-head></page-head>
		<view style="padding: 2vh;flex:1;">
			<view style=" height: 100%;" class="flex_col">
				<view class="flex_row_between rem04">
					<view>
						参数配置（v1.0.2）<text style="color: #D8D8D8D8;padding-right: 0.2rem;">|</text> 发现软件新版本v1.0.3,
						建议您进行升级，
						<text @click="navigateTo('/pages/update/update')"
							style="color: #44CE7B;letter-spacing: 0;border-bottom: 1px solid  #44CE7B;font-weight: 400;">升级软件</text>
					</view>
					<view @click="navigateTo('/pages/choseType/choseType')"
						style="color: #44CE7B;letter-spacing: 0;border-bottom: 1px solid  #44CE7B;font-weight: 400;">
						{{typeTxt}}</view>
				</view>
				<view class="set-con " style="flex:1;">
					<view class="set-cont rem04" style="flex:1">
						<view class="alignCenter" style="width: 100vh;">
							<view class="set-cont-title">编码参数</view>
							<view class="input-con" style="width: 18vh;margin-right: 3.5vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;" placeholder="机构编码" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="input-con" style="width: 26vh;margin-right: 3.5vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;" placeholder="设备编码" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="input-con" style="width: 15vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;" placeholder="音频码" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
						</view>
						<view class="alignCenter" style="padding-top: 5vh;width: 100vh;">
							<view class="set-cont-title">图像参数</view>
							<view class="input-con" style="width: 31vh;margin-right: 5.7vh;height: 8vh;">
								<input class="rem03" style="padding-left:1vh;" placeholder="图像阈值" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view v-if="open" class="open-con flex_row" style="width: 31vh;height:8vh;">
                                <view style="flex: 1;text-align: center;">
                                    <image style="height: 15vh;width: 8vh;" src="../../image/icon/people-sel.png" mode="aspectFit"></image>
                                </view>
			
                                <view class="open-btn" @click="open=false">关闭</view>
							</view>
                            <view v-else class="open-con flex_row" style="width: 31vh;height:8vh;">
                                <view class="open-btn" @click="open=true">开启</view>
                                <view style="flex: 1;text-align: center;">
                                    <image style="height: 15vh;width: 8vh;" src="../../image/icon/people-unsel.png" mode="aspectFit"></image>
                                </view>

                            </view>

						</view>
						<view class="alignCenter" style="padding-top: 5vh;width: 100vh;">
							<view class="set-cont-title">IP地址</view>
							<view class="input-con" style="width: 12vh;margin-right: 2.5vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="dian" />
							<view class="input-con" style="width: 12vh;margin-right: 2.5vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="dian" />
							<view class="input-con" style="width: 12vh;margin-right: 2.5vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view class="dian" />
							<view class="input-con" style="width: 12vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
						</view>
						<view class="alignCenter" style="padding-top: 5vh;width: 100vh;">
							<view class="set-cont-title">温、湿度预警</view>
							<view class="input-con" style="width: 12vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view style="font-size:2vh;padding:0.12rem;margin:0 0.4vh;">
								<view>℃</view>
								<view> 最低</view>
							</view>
							<view class="input-con" style="width: 12vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view style="font-size:2vh;padding:0.12rem;margin:0 0.4vh;">
								<view>℃</view>
								<view> 最高</view>
							</view>
							<view class="input-con" style="width: 12vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view style="font-size:2vh;padding:0.12rem;margin:0 0.4vh;">
								<view>%</view>
								<view> 最低</view>
							</view>
							<view class="input-con" style="width: 12vh;height: 8vh;">
								<input class="rem03" style="text-align: center;" placeholder-style="color: #FFFFFF;opacity: 0.3;" />
							</view>
							<view style="font-size:2vh;padding-left:0.12rem;margin:0 0.3vh;">
								<view>%</view>
								<view> 最高</view>
							</view>
						</view>
					</view>

					<view class="set-btn-con">
                        <view style="padding: 0 2vh;">
                            <button  style="background: #646B97;border-radius: 2vh;" type="primary" @click="back_click">
                            <view style="padding: 0.5vh;">重置设置</view>	
                            </button>
                        </view>
						<view style="padding: 0 2vh;">
                        <button style="background: #646B97;border-radius: 2vh;" type="primary" @click="navigateTo('/pages/zj/zj')">
                        	<view style="padding: 0.5vh;">系统自检</view>    
                        </button>
                        </view>
                        <view style="padding: 0 2vh;">
                            <button style="background: #646B97;border-radius: 2vh;" type="primary" @click="back_click">
                            	<view style="padding: 0.5vh;">取消</view>   
                            </button>
                        </view>
                        <view style="padding: 0 2vh;">
                            <button style="background: #44CE7B;border-radius: 2vh;" @click="back_click">
                            	<view style="padding: 0.5vh;">保存</view>
                            </button>
                        </view>
					</view>
				</view>

			</view>

		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				btnArr:["YL-8系","YL-6系","YL-4系"],
				typeTxt:"",
                open:true,
			}
		},
		onShow: function() {
			this.typeTxt = this.btnArr[getApp().globalData.type];
            
			// console.log(getApp().globalData.type)
		},
		methods: {
			navigateTo(url){
			    uni.navigateTo({
			    	url: url
			    })
			},
			back_click() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background: #1E2238;
	}

	.set-con {
		opacity: 0.98;
		background: #3E4469;
		border-radius: 2vh;
		margin-top: 5vh;
		display: flex;
		flex-direction: column;
		margin-bottom: 10vh;
	}

	.set-cont {
		background: #4A5079;
		border-radius: 2vh 2vh 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
        padding-right: 10vh;
	}

	.set-cont-title {
		padding-right: 3vh;
		width:20vh;
		text-align: right;
	}

	.input-con {
		background: #646B97;
		border-radius: 2vh;
		height: 30px;
		display: flex;
		align-items: center;
		padding:0 0.2rem;
	}
    .open-con{
        background: #000;
        border-radius: 2vh;
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.08rem ;
    }
    .open-btn{
        background: #646B97;
        border-radius: 2vh;
        height: 7.5vh;
        width: 15vh;
        flex: 1;
        justify-content: center;
        display: flex;
        align-items: center;
    }
	.dian {
		width: 0.2rem;
		height: 0.2rem;
		background: #fff;
		border-radius: 0.1rem;
		margin-right: 2.5vh;
	}

	.set-btn-con {
		padding: 2vh 10vh;
		display: flex;
		justify-content: center;
	}
    .input::-webkit-input-placeholder {
         font-size: 3vh;
     }
</style>
